<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>注册信息</span>
        </div>
      </template>
      <div class="text item">
        <div>
          <span class="dic1">用户名</span>
          <span class="dic2">{{username}}</span>
        </div>
        <br>
        <div>
          <span class="dic1">账户ID</span>
          <span class="dic2">{{id}}</span>
        </div>
        <br>
        <div>
          <span class="dic1">邮件地址</span>
          <span class="dic2">{{email}}</span>
        </div>
        <br>
        <div>
          <span class="dic3">密码</span>
          <el-popover placement="right" :width="400" v-model:visible="visible">
            <el-form :model="form" ref="form" :rules="rules" label-position="left"
                     label-width="80px" status-icon>
              <el-form-item label="新密码" prop="password1">
                <el-input v-model="form.password1" placeholder="8～20位字母、数字或特殊符号"
                          prefix-icon="el-icon-s-goods" show-password></el-input>
              </el-form-item>
              <el-form-item label="重复密码" prop="password2">
                <el-input v-model="form.password2" placeholder="请重复输入密码"
                          prefix-icon="el-icon-s-goods" show-password></el-input>
              </el-form-item>
            </el-form>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="submit('form')">确定</el-button>
            </div>
            <template #reference>
              <el-button type="primary" size="medium" @click="visible=true">修改密码</el-button>
            </template>
          </el-popover>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import qs from "qs";
import axios from 'axios'

export default {
  name: "InfoCard",
  mounted() {
    this.getInfo()
  },
  data() {
    const passwordCheck = (rule, value, callback) => {
      if(value === ''){
        callback(new Error('请输入密码'))
      } else {
        const reg = /^[^\s]*$/
        if (!reg.test(value)) {
          callback(new Error('密码中不能包含空格'))
        } else {
          callback()
        }
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.form.password2 !== '') {
          this.$refs.form.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password1) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      username: '',
      id: 0,
      email: '',
      form: {
        password1: '',
        password2: ''
      },
      rules: {
        password1: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {validator: validatePass, trigger: 'blur'},
          {validator: passwordCheck, trigger: 'blur'},
          {min: 8, max: 20, message: '请输入8-20位密码', trigger: 'blur'}
        ],
        password2: [
          {required: true, message: '请重复输入密码', trigger: 'blur'},
          {validator: validatePass2, trigger: 'blur'}
        ],
      },

    }
  },
  methods: {
    getInfo() {
      this.id = localStorage.getItem('id')
      const data = {
        id: this.id
      }
      axios.post('/api/user/getInfo',qs.stringify(data)).then((res) => {
        if(res.data.code === 0) {
          this.username = res.data.data.username
          this.email = res.data.data.email
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    submit(form) {

      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = {
            id: this.id,
            password1: this.form.password1,
            password2: this.form.password2
          }

          axios.post('/api/user/alter', qs.stringify(data)).then((res) => {
            if (res.data.code !== 0) {
              this.$notify.error(res.data.msg)
            } else {
              this.$message.success('修改密码成功!')
              this.visible = false
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

.dic1 {
  width: 100px;
  display: inline-block;
}

.dic2{
  margin: 50px;
}

.dic3 {
  width: 150px;
  display: inline-block;
}



</style>